<h3>Add Contact</h3>
<br/>

<form id="createUser" name="createUser" class="form-horizontal" role="form" ng-controller="UsersController as usersCtrl"
      ng-submit="createUser.$valid && usersCtrl.createUser(firstName, middleName, lastName) || usersCtrl.closeAll()"
      novalidate>
    

 		<div class="form-group col-sm-8" ng-class="{'has-error': !createUser.firstName.$valid && createUser.firstName.$dirty}">
	    	<label for="fistName" class="col-sm-6 control-label">First Name:</label>
			<input class="form-control" name="firstName" type="text" maxlength="20" ng-model="firstName" required></br>
	    </div>
		<div class="form-group col-sm-8">
			<label for="middleName" class="col-sm-7 control-label">Middle Name:</label>
			<input class="form-control" name="middleName" type="text" maxlength="20" ng-model="middleName"></br>
		</div>
		<div class="form-group col-sm-8" ng-class="{'has-error': !createUser.lastName.$valid && createUser.lastName.$dirty}">
			<label for="lastName" class="col-sm-6 control-label">Last Name:</label>
			<input class="form-control" name="lastName" type="text" maxlength="20" ng-model="lastName" required></input></br>
		</div>
	    <div class="form-group">
		    <div class="col-sm-10">
		        <input ng-disabled="!createUser.$valid" id="btn-login" type="submit" name="add" class="btn btn-success col-sm-8" value="Add contact">
		    </div>
		</div>    
</form>
